<template>
	<list class="y-flex-1">
		<cell v-for="(item, index) in list">
			<com-cell
			:title="'页面' + (index + 1) + ' - ' + (item.name || '暂未命名') + ' - ' + (item.style ? item.style.navigationTitle : '未命名')"
			:label="page[item.type].label"
			text="编辑"
			border
			:title-color="skinColor.color_1"
			:text-color="skinColor.color_blue"
			:label-color="skinColor.color_3"
			:border-color="skinColor.color_gap_1"
			padding="30rpx"
			linkable
			:disabled="disabled"
			@click="handleEdit(item, index)">
				<template #right>
					<com-icon class="ml-10" name="close" size="40rpx" :color="skinColor.color_3" :disabled="disabled" @click="handleClose($event, index)"></com-icon>
				</template>
			</com-cell>
		</cell>
		<cell>
			<view class="y-flex y-row y-align-center y-justify-center pt-30 pb-30" @tap="handleAdd">
				<com-icon name="add" size="40" :color="skinColor.color_1"></com-icon>
				<text class="fs-30" :style="{color: skinColor.color_1}">添加页面</text>
			</view>
		</cell>
		<options-select ref="optionsSelect"></options-select>
	</list>
</template>

<script>
	import appMixin from '@/assets/mixin/app.js'
	import OptionsSelect from '../components/options.vue'
	import { Page } from '@/assets/js/interface.js'
	export default {
		mixins: [appMixin],
		components: {OptionsSelect},
		props: {
			disabled: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			page () {
				return Page
			}
		},
		data () {
			return {
				list: []
			}
		},
		beforeDestroy () {
			uni.$off('pageSelect')
		},
		methods: {
			onShow () {
				uni.$off('pageSelect')
			},
			onBackPress () {
				if ( this.$refs.optionsSelect.visible ) {
					this.$refs.optionsSelect.hide()
					return true
				}
				return false
			},
			setData (jsondata) {
				const pages = jsondata.pages || []
				this.list = pages
			},
			handleEdit (item, index) {
				uni.$once('pageSelect', data => {
					this.$set(this.list, index, data)
				})
				this.$Router.push({path: '/pages/program/form/pages/form', query: {type: item.type, form: item, disabled: this.disabled}})
			},
			handleAdd () {
				if ( this.disabled ) return
				const keys = Object.keys(this.page)
				this.$refs.optionsSelect.select({
					title: '需要添加什么类型的页面',
					actions: keys.map(key => this.page[key].label),
					success: res => {
						const index = keys.findIndex(key => this.page[key].label == res.detail.label)
						const key = keys[index]
						uni.$once('pageSelect', data => {
							this.list.push(data)
						})
						this.$Router.push({path: '/pages/program/form/pages/form', query: {type: key}})
					}
				})
			},
			handleClose (e, index) {
				 e.stopPropagation && e.stopPropagation()
				 this.list.splice(index, 1)
			},
		}
	}
</script>

<style>
</style>